<template>
  <div class="box">
    <!-- <build-el-h1 name="大赛申报流程标题.png"></build-el-h1> -->
    <oneTitle title="申报流程"></oneTitle>
    <div class="flex-row" style="padding-right: 20px">
      <div class="fwb" v-html="details.contestProcess"></div>
      <!-- <div v-for="(item, index) in circuit.data" :key="index + item.icon" class="flex-row">
        <build-el-icon-list-col :icon="item.icon" :t1="item.t1" :t2="item.t2"></build-el-icon-list-col>
        <build-el-line v-if="index != circuit.data.length - 1"></build-el-line>
      </div>-->
    </div>
    <div class="flex-row download">
      <img
        src="../../assets/imgs/xiazai-2.png"
        alt
        srcset
        @click="dialogVisible = true"
      />
      <img
        src="../../assets/imgs/shangchuan-2.png"
        alt
        srcset
        @click="toUpload"
      />
    </div>
    <el-dialog
      title="大赛文件下载"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose"
    >
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" align="center"> </el-table-column>
        <el-table-column prop="name" label="文件名字" align="center">
        </el-table-column>
        <el-table-column prop="address" label="下载" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="default"
              @click="handDowUp(scope.row.imgUrl, scope.row)"
              >下载</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import buildElH1 from "../build-el-h1";
import buildElIconListCol from "../build-el-icon-list-col";
import buildElLine from "../build-el-line";
import JSONData from "@/assets/JSON";
import router from "@/router";
export default {
  components: {
    buildElH1,
    buildElIconListCol,
    buildElLine,
  },
  data() {
    return {
      ...JSONData,
      details: {},
      dialogVisible: false,
      tableData: [],
    };
  },
  async mounted() {
    let res = await this.api.findDownloadFile({ customizeId: 1 });
    this.details = res;
    if (this.details.files) {
      this.tableData = JSON.parse(this.details.files);
    }
  },
  methods: {
    handDowUp(pageUrl, row) {
      if (row.url) {
        location.href = row.url;
      }
      if (row.imgUrl) {
        location.href = row.imgUrl;
      }
    },
    handleClose() {
      this.dialogVisible = false;
    },
    async down() {
      await this.api.downloadFiles();
    },
    toUpload() {
      router.push({
        name: "Upload",
      });
    },
  },
};
</script>
<style lang="less" scoped>
.box {
  padding-left: calc((100vw - 1200px) / 2);
  background: #fff;
  width: 875px;
  box-sizing: content-box;
  padding-top: 60px;
  .download {
    padding: 60px 0;
    display: flex;
    justify-content: center;
    img {
      .pointer;
      width: 173px;
      margin: 0 10px;
      &:first-child {
        // margin-left: 90px;
      }
    }
  }
}
</style>
